<template>
  <div class="Jmtj">
    <h1><span> 加盟条件</span></h1>
    <div class="listS">
      <div class="textArea">
        <div class="icon-box">
          <img src="../assets/product-red/zsjmicon1.png" alt="" />
        </div>
        <p class="grayColor">理念</p>
        <p class="whiteColor">
          立志从事茶行业，认可竹叶青连锁经营模式及加盟管理制度，致力于发展竹叶青在该区域的高端消费群体
        </p>
      </div>

      <div class="textArea">
        <div class="icon-box">
          <img src="../assets/product-red/zsjmicon2.png" alt="" />
        </div>
        <p class="grayColor">财力</p>
        <p class="whiteColor">
          具有一定的资金实力用于前期的市场投入、宣传等，以及必要的流动资金
        </p>
      </div>

      <div class="textArea">
        <div class="icon-box">
          <img src="../assets/product-red/zsjmicon3.png" alt="" />
        </div>
        <p class="grayColor">资源</p>
        <p class="whiteColor">
          在合作区域有丰富的人脉关系、客户群体资源和良好的社会声誉
        </p>
      </div>

      <div class="textArea">
        <div class="icon-box">
          <img src="../assets/product-red/zsjmicon4.png" alt="" />
        </div>
        <p class="grayColor">能力</p>
        <p class="whiteColor">拥有或有能力组建专业的运营管理团队负责门店运营</p>
      </div>

      <div class="textArea">
        <div class="icon-box">
          <img src="../assets/product-red/zsjmicon5.png" alt="" />
        </div>
        <p class="grayColor">店面</p>
        <p class="whiteColor">
          有独立门店并提供产权证明或租赁证明，取得营业执照等相关证件
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件
  components: {},
  data() {
    return {};
  },
  //方法集合
  methods: {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="less" scoped>
.Jmtj {
  height: 80vh;
  background-image: url("../assets/product-red/jmtjbgp.jpg");
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: 100px;

  cursor: pointer;
  h1 {
    font-size: 36px;
    color: #a8845c;
    position: relative;
    margin-bottom: 30px;
    & > span {
      &:before {
        content: "";
        position: absolute;
        left: 44%;
        top: -10px;
        width: 32px;
        height: 32px;
        background: url("../assets/product-red/t1.png") no-repeat;
        background-size: cover;
      }
      &::after {
        content: "";
        position: absolute;
        left: 54%;
        bottom: -20px;
        width: 32px;
        height: 32px;
        background: url("../assets/product-red/t2.png") no-repeat;
        background-size: cover;
      }
    }
  }
  .listS {
    display: flex;
    justify-content: space-evenly;
    .textArea {
      margin-top: 80px;
      width: 200px;
      height: 300px;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      .icon-box {
        width: 70px;
        height: 70px;
        border-radius: 70px;
        display: flex;
        justify-content: center;
        align-items: center;

        background-color: white;
        img {
          width: 40px;
        }
      }
      .grayColor {
        font-size: 28px;
        color: #a8845c;
      }
      .whiteColor {
        font-size: 16px;
        color: #fff;
      }
    }
    .textArea:hover {
      margin-top: 60px;
      transition: all 0.5s linear;
    }
  }
}
</style>
